<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Grid Selectors</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../css/skins/claro.css";
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			.dgrid { 
				width: 70%;
				margin: 10px;
			}
			.field-col1 {
				width: 40px;
			}
			
			#grid-complex .dgrid-cell-padding {
				height: 2em; /* force consistent heights across columnset cells */
			}
			.dgrid-column-set-0 {
				width: 42px;
			}
		</style>
		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			var getColumns;
			
			require(["dojo/on", "dgrid/OnDemandGrid", "dgrid/selector", "dgrid/Selection", "dgrid/Keyboard", "dgrid/ColumnSet",
					"dojo/_base/declare", "dojo/_base/array", "dojo/json", "dgrid/test/data/base", "dojo/domReady!"], 
				function(on, Grid, selector, Selection, Keyboard, ColumnSet, declare, arrayUtil, json, testStore){
					on(document.body, "dgrid-select,dgrid-deselect",
						function(event){
							var msg = (event.type == "dgrid-deselect" ? "de" : "") + "selected";
							console.log(event.grid.id + ": " + msg +
								(event.parentType ? " (via " + event.parentType + "): " : ": "),
								arrayUtil.map(event.rows, function(row){ return row.id; }).join(", "));
							console.log("selection: ", json.stringify(event.grid.selection, null, "  "));
						}
					);
					
					getColumns = function(){
						return {
							col1: selector({ disabled: function(object){ return object.col1 == "note"; }}),
							id: "ID",
							col2: { label: 'Column 2', sortable: false },
							col3: { label: 'Column 3' }
						};
					};
					
					var SelectionGrid = declare([Grid, Selection, Keyboard]);
					
					window.grid = new SelectionGrid({
						store: testStore,
						selectionMode: "none",
						columns: getColumns(),
						allowSelectAll: true
					}, "grid");
					window.grid2 = new SelectionGrid({
						store: testStore,
						selectionMode: "none",
						columns: {
							col1: selector({ label: "Select" }),
							id: "ID",
							col2: {label: 'Column 2', sortable: false},
							col3: {label: 'Column 3'}
						},
						allowSelectAll: false
					}, "grid2");

					window.gridRadio = new SelectionGrid({
						store: testStore,
						selectionMode: "none",
						columns: {
							col1: selector({ label: 'Radio', disabled: function(object){ return object.col3 == "read"; } }, "radio"),
							id: "ID",
							col2: {label: 'Column 2', sortable: false},
							col3: {label: 'Column 3'}
						}
					}, "grid-radio");
					
					window.gridComplex = new (declare([Grid, ColumnSet, Selection, Keyboard]))({
						store: testStore,
						columnSets: [
							[
								[
									selector({ field: "col1", disabled: function(object){ return object.col1 == "note"; }})
								]
							], [
								[
									{ field: "id", label: "ID" },
									{ field: "col2", label: "Column 2", sortable: false },
									{ field: "col3", label: "Column 3" }
								]
							]
						]
					}, "grid-complex");
				}
			);
		</script>
	</head>
	<body class="claro">
		<h2>A grid with checkbox selectors, with select-all enabled
			(top checkbox, and Ctrl/Cmd+A)</h2>
		<div>
			<button type="button" onclick="grid.set('selectionMode', 'none');">
				Set selection mode to "none"</button>
			<button type="button" onclick="grid.set('selectionMode', 'single');">
				Set selection mode to "single"</button>
			<button type="button" onclick="grid.set('selectionMode', 'multiple');">
				Set selection mode to "multiple"</button>
			<button type="button" onclick="grid.set('selectionMode', 'extended');">
				Set selection mode to "extended"</button>
		</div>
		<div id="grid"></div>
		<div>
			<button type="button" onclick="grid.set('columns', getColumns());">
				Reset columns (should not cause errors)
			</button>
		</div>
		<h2>A grid with radio selectors</h2>
		<div>
			<button type="button" onclick="gridRadio.set('selectionMode', 'none');">
				Set selection mode to "none"</button>
			<button type="button" onclick="gridRadio.set('selectionMode', 'single');">
				Set selection mode to "single" (to test sync)</button>
		</div>
		<div id="grid-radio"></div>
		<h2>A grid with checkbox selectors, with select-all disabled</h2>
		<div id="grid2"></div>
		<h2>A grid with checkbox selectors and column sets</h2>
		<div id="grid-complex"></div>
	</body>
</html>
